<!DOCTYPE html>
<html lang="ko" dir="ltr">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Docker – codthing</title>
    


  
  <script defer src="/js/fuse.min.c4bee9a8d44273d6154fe86006923d4131eb2e8069d8897687137c6f37f553e3.js"></script>



<script src="/js/enquire.min.aa37bdcb743826eecdae5c5d177fc7d6552340f1b4378ffaa9c82b2c6111400b.js"></script>

<script defer src="/js/lazysizes.min.5e11d056075a05065b9c0bfec44084a113fc2976c2952ec804dedb61c7662db9.js"></script>

<script defer src="/js/helper/getParents.min.cd44056d552c69703dced61ae60f99166a0ddf44be93d6aa5d5127d98bf98984.js"></script>

<script defer src="/js/helper/fadeinout.min.58d290b487a552ce9c144bf938c2758c4a3afbc4f17d70d11771c9e3c61fe3d0.js"></script>

<script>
  "use strict";

  window.onload = function() {
    
    var languagedir = JSON.parse("\"ltr\"");
    
    var baseurl = JSON.parse("\"https://codthing.github.io/\"");
    
    var permalink = JSON.parse("\"https://codthing.github.io/nodejs/docker/docker/\"");

    
    var toggleSidebarElem = document.getElementById("toggle-sidebar");
    var toggleMenuElem = document.getElementById("toggle-menu");
    var tocBodyElem = document.querySelector('.toc__body');
    var tocLabelElem = document.querySelector('.toc__label');
    var listMainElem = document.getElementById('list-main');
    var listSideElem = document.getElementById('list-side');
    var singleMenuElem = document.getElementById('single-menu');
    var sliderIcons = document.querySelectorAll('.slider__icon');

    toggleSidebarElem ?
      toggleSidebarElem.addEventListener('change', function (e) {
        if (e.target.checked) {
          if (tocBodyElem) {
            fadeIn(tocBodyElem, 200);
          }
          if (tocLabelElem) {
            fadeIn(tocLabelElem, 200);
          }
          if (listMainElem && listSideElem) {
            listMainElem.className = 'm';
            listSideElem.className = 'r';
          }

          sliderIcons && sliderIcons.forEach(function (elem) {
            if (elem.classList.contains('hide')) {
              elem.classList.remove('hide');
            } else {
              elem.classList.add('hide');
            }
          });

        } else {
          if (tocBodyElem) {
            fadeOut(tocBodyElem, 200);
          }
          if (tocLabelElem) {
            fadeOut(tocLabelElem, 200);
          }
          if (listMainElem && listSideElem) {
            listMainElem.className = 'mr';
            listSideElem.className = 'hide';
          }

          sliderIcons && sliderIcons.forEach(function (elem) {
            if (elem.classList.contains('hide')) {
              elem.classList.remove('hide');
            } else {
              elem.classList.add('hide');
            }
          });
        }
      }) : null;

    toggleMenuElem ?
      toggleMenuElem.addEventListener('change', function (e) {
        if (e.target.checked) {
          if (listMainElem && singleMenuElem) {
            listMainElem.className = 'm';
            singleMenuElem.className = 'l';
          }

          sliderIcons && sliderIcons.forEach(function (elem) {
            if (elem.classList.contains('hide')) {
              elem.classList.remove('hide');
            } else {
              elem.classList.add('hide');
            }
          });

        } else {
          if (listMainElem && singleMenuElem) {
            listMainElem.className = 'lm';
            singleMenuElem.className = 'hide';
          }

          sliderIcons && sliderIcons.forEach(function (elem) {
            if (elem.classList.contains('hide')) {
              elem.classList.remove('hide');
            } else {
              elem.classList.add('hide');
            }
          });
        }
      }) : null;
    


    
    var navCollapseBtn = document.getElementById('navCollapseBtn');
    navCollapseBtn ? navCollapseBtn.addEventListener('click', function(e) {
      var navCollapse = document.querySelector('.navbar__collapse');
      
      if (navCollapse) {
        var dataOpen = navCollapse.getAttribute('data-open');

        if (dataOpen === 'true') {
          navCollapse.setAttribute('data-open', 'false');
          navCollapse.style.maxHeight = 0;
        } else {
          navCollapse.setAttribute('data-open', 'true');
          navCollapse.style.maxHeight = navCollapse.scrollHeight + "px";
        }
      }
    }) : null;
    


    
    var expandBtn = document.querySelectorAll('.expand__button');

    for (let i = 0; i < expandBtn.length; i++) {
      expandBtn[i].addEventListener("click", function () {
        var content = this.nextElementSibling;
        if (content.style.maxHeight) {
          content.style.maxHeight = null;
          this.querySelector('svg').classList.add('expand-icon__right');
          this.querySelector('svg').classList.remove('expand-icon__down');
        } else {
          content.style.maxHeight = content.scrollHeight + "px";
          this.querySelector('svg').classList.remove('expand-icon__right');
          this.querySelector('svg').classList.add('expand-icon__down');
        }
      });
    }
    



    
    document.querySelectorAll('.tab') ? 
    document.querySelectorAll('.tab').forEach(function(elem, idx) {
      var containerId = elem.getAttribute('id');
      var containerElem = elem;
      var tabLinks = elem.querySelectorAll('.tab__link');
      var tabContents = elem.querySelectorAll('.tab__content');
      var ids = [];

      tabLinks && tabLinks.length > 0 ?
      tabLinks.forEach(function(link, index, self) {
        link.onclick = function(e) {
          for (var i = 0; i < self.length; i++) {
            if (index === parseInt(i, 10)) {
              if (!self[i].classList.contains('active')) {
                self[i].classList.add('active');
                tabContents[i].style.display = 'block';
              }
            } else {
              self[i].classList.remove('active');
              tabContents[i].style.display = 'none';
            }
          }
        }
      }) : null;
    }) : null;
    


    
    document.querySelectorAll('.codetab') ? 
    document.querySelectorAll('.codetab').forEach(function(elem, idx) {
      var containerId = elem.getAttribute('id');
      var containerElem = elem;
      var codetabLinks = elem.querySelectorAll('.codetab__link');
      var codetabContents = elem.querySelectorAll('.codetab__content');
      var ids = [];

      codetabLinks && codetabLinks.length > 0 ?
      codetabLinks.forEach(function(link, index, self) {
        link.onclick = function(e) {
          for (var i = 0; i < self.length; i++) {
            if (index === parseInt(i, 10)) {
              if (!self[i].classList.contains('active')) {
                self[i].classList.add('active');
                codetabContents[i].style.display = 'block';
              }
            } else {
              self[i].classList.remove('active');
              codetabContents[i].style.display = 'none';
            }
          }
        }
      }) : null;
    }) : null;
    

    
    
    
    var enableDarkMode = JSON.parse("true");
    var root = document.getElementById('root');
    var toggleToLightBtn = document.getElementById('toggleToLight');
    var toggleToDarkBtn = document.getElementById('toggleToDark');

    if (!enableDarkMode) {
      root.className = 'theme__light';
      localStorage.setItem('theme', 'light');
    }
    
    if (toggleToDarkBtn) {
      toggleToDarkBtn.onclick = function (e) {
        root.className = 'theme__dark';
        localStorage.setItem('theme', 'dark');
        toggleToLightBtn.className = 'navbar__icons--icon';
        toggleToDarkBtn.className = 'hide';
      }
    }

    if (toggleToLightBtn) {
      toggleToLightBtn.onclick = function (e) {
        root.className = 'theme__light';
        localStorage.setItem('theme', 'light');
        toggleToLightBtn.className = 'hide';
        toggleToDarkBtn.className = 'navbar__icons--icon';
      }
    }

    
    document.querySelectorAll('.menu__list').forEach(function(elem) {
      if (elem.classList.contains('active')) {
        elem.style.maxHeight = elem.scrollHeight + "px"; 
      }
    });
    
    document.querySelectorAll('.menu__title--collapse').forEach(function(elem) {
      elem.addEventListener('click', function (e) {
        var content = this.nextElementSibling;
        var menuTitleIcon = this.querySelector('.menu__title--icon');
        if (!content) {
          return null;
        }

        var parent = elem.parentNode;
        while (parent.classList.contains('menu__list') && parent.classList.contains('active')) {
          parent.style.maxHeight = 100 * parent.children.length + "px";
          parent = parent.parentNode;
        }

        if (content.style.maxHeight) {
          content.style.maxHeight = null;
          content.classList.remove('active');
          menuTitleIcon.classList.add('right');
          
          if (languagedir === 'rtl') {
            menuTitleIcon.classList.remove('downrtl');
          } else {
            menuTitleIcon.classList.remove('down');
          }
        } else {
          content.style.maxHeight = content.scrollHeight + "px";
          content.classList.add('active');
          menuTitleIcon.classList.remove('right');
          
          if (languagedir === 'rtl') {
            menuTitleIcon.classList.add('downrtl');
          } else {
            menuTitleIcon.classList.add('down');
          }
        }
      });
    });
    


    
    var mobileLogo = document.getElementById('mobileLogo');
    var modal = document.getElementById("myModal");
    var drawer = document.getElementById('myDrawer');
    var drawerCloseBtn = document.querySelector('.drawer__close');

    var openDrawer = function() {
      modal.style.opacity = 1;

      if (languagedir === 'rtl') {
        modal.style.right = 0;
        drawer.style.right = 0;
      } else {
        modal.style.left = 0;
        drawer.style.left = 0;
      }
    }

    var closeDrawer = function() {
      modal.style.opacity = 0;

      if (languagedir === 'rtl') {
        drawer.style.right = '-100%';
      } else {
        drawer.style.left = '-100%';
      }

      
      setTimeout(function () {
        if (languagedir === 'rtl') {
          modal.style.right = '-100%';
        } else {
          modal.style.left = '-100%';
        }
      }, 250);
    }

    mobileLogo.onclick = function () {
      openDrawer();
      localStorage.setItem('isDrawerOpen', 'true');
    }

    modal.onclick = function () {
      closeDrawer();
      localStorage.setItem('isDrawerOpen', 'false');
    }

    drawerCloseBtn.onclick = function () {
      closeDrawer();
      localStorage.setItem('isDrawerOpen', 'false');
    }
  


  
    var lastScrollTop = window.pageYOffset || document.documentElement.scrollTop;
    var tocElem = document.querySelector('.toc');
    var tableOfContentsElem = tocElem ? tocElem.querySelector('#TableOfContents') : null;
    var singleContentsElem = document.querySelector('.single__contents');
    var dataBGImgs = document.querySelectorAll('div[data-bgimg]');

    
    var tocLevels = JSON.parse("[\"h2\",\"h3\",\"h4\"]");

    if (tocLevels) {
      tocLevels = tocLevels.toString();
    } else {
      tocLevels = "h1, h2, h3, h4, h5, h6";
    }

    
    var isLandingBgImg = JSON.parse("null");
    
    var isHome = JSON.parse("false");

    function setNavbarBG(scrollTop) {
      if (isHome && isLandingBgImg && Object.keys(isLandingBgImg).length) {
        if (isLandingBgImg.height <= scrollTop) {
          dataBGImgs.forEach(function(elem) {
            elem.setAttribute('data-bgimg', 'false');
          });
        } else {
          dataBGImgs.forEach(function (elem) {
            elem.setAttribute('data-bgimg', 'true');
          });
        }
      }
    }
    setNavbarBG(lastScrollTop);

    window.onscroll = function () {
      var st = window.pageYOffset || document.documentElement.scrollTop;
      if (st > lastScrollTop) { 
        singleContentsElem ? 
        singleContentsElem.querySelectorAll(tocLevels.toString()).forEach(function(elem) {
          if (document.documentElement.scrollTop >= elem.offsetTop) {
            if (tableOfContentsElem) {
              var id = elem.getAttribute('id');
              tocElem.querySelectorAll('a').forEach(function (elem) {
                elem.classList.remove('active');
              });
              tocElem.querySelector('a[href="#' + id + '"]') ? 
              tocElem.querySelector('a[href="#' + id + '"]').classList.add('active') : null;
            }
          }
        }) : null;
        setNavbarBG(st);
      } else { 
        singleContentsElem ? 
        singleContentsElem.querySelectorAll(tocLevels.toString()).forEach(function(elem) {
          if (document.documentElement.scrollTop >= elem.offsetTop) {
            if (tableOfContentsElem) {
              var id = elem.getAttribute('id');
              tocElem.querySelectorAll('a').forEach(function (elem) {
                elem.classList.remove('active');
              });
              tocElem.querySelector('a[href="#' + id + '"]') ? 
              tocElem.querySelector('a[href="#' + id + '"]').classList.add('active') : null;
            }
          }
        }) : null;
        setNavbarBG(st);
      }
      lastScrollTop = st <= 0 ? 0 : st;
    };
    



    
    var mobileSearchInputElem = document.querySelector('#search-mobile');
    var mobileSearchClassElem = document.querySelector('.mobile-search');
    var mobileSearchBtnElem = document.querySelector('#mobileSearchBtn');
    var mobileSearchCloseBtnElem = document.querySelector('#search-mobile-close');
    var mobileSearchContainer = document.querySelector('#search-mobile-container');
    var mobileSearchResultsElem = document.querySelector('#search-mobile-results');
    var htmlElem = document.querySelector('html');

    if (mobileSearchClassElem) {
      mobileSearchClassElem.style.display = 'none';
    }

    mobileSearchBtnElem ? 
    mobileSearchBtnElem.addEventListener('click', function () {
      if (mobileSearchContainer) {
        mobileSearchContainer.style.display = 'block';
      }

      if (mobileSearchInputElem) {
        mobileSearchInputElem.focus();
      }

      if (htmlElem) {
        htmlElem.style.overflowY = 'hidden';
      }
    }) : null;

    mobileSearchCloseBtnElem ? 
    mobileSearchCloseBtnElem.addEventListener('click', function() {
      if (mobileSearchContainer) {
        mobileSearchContainer.style.display = 'none';
      }

      if (mobileSearchInputElem) {
        mobileSearchInputElem.value = '';
      }
      
      if (mobileSearchResultsElem) {
        while (mobileSearchResultsElem.firstChild) {
          mobileSearchResultsElem.removeChild(mobileSearchResultsElem.firstChild);
        }
      }

      if (htmlElem) {
        htmlElem.style.overflowY = 'visible';
      }
    }) : null;

    mobileSearchInputElem ? 
    mobileSearchInputElem.addEventListener('keydown', function(e) {
      if (e.key === 'Escape') {
        if (mobileSearchContainer) {
          mobileSearchContainer.style.display = 'none';
        }
        
        if (mobileSearchInputElem) {
          mobileSearchInputElem.value = '';
        }

        if (mobileSearchResultsElem) {
          while (mobileSearchResultsElem.firstChild) {
            mobileSearchResultsElem.removeChild(mobileSearchResultsElem.firstChild);
          }
        }
        if (htmlElem) {
          htmlElem.style.overflowY = 'visible';
        }
      }
    }) : null;
  


  
    var localTheme = localStorage.getItem('theme');
    var rootEleme = document.getElementById('root');
    var selectThemeElem = document.querySelectorAll('.select-theme');
    var selectThemeItemElem = document.querySelectorAll('.select-theme__item');
    
    if (localTheme) {
      selectThemeItemElem ? 
      selectThemeItemElem.forEach(function (elem) {
        if (elem.text.trim() === localTheme) {
          elem.classList.add('is-active');
        } else {
          elem.classList.remove('is-active');
        }
      }) : null;
    }

    selectThemeItemElem ? 
    selectThemeItemElem.forEach(function (v, i) {
      v.addEventListener('click', function (e) {
        var selectedThemeVariant = e.target.text.trim();
        localStorage.setItem('theme', selectedThemeVariant);

        rootEleme.removeAttribute('class');
        rootEleme.classList.add(`theme__${selectedThemeVariant}`);
        selectThemeElem.forEach(function(rootElem) {
          rootElem.querySelectorAll('a').forEach(function (elem) {
            if (elem.classList) {
              if (elem.text.trim() === selectedThemeVariant) {
                if (!elem.classList.contains('is-active')) {
                  elem.classList.add('is-active');
                }
              } else {
                if (elem.classList.contains('is-active')) {
                  elem.classList.remove('is-active');
                }
              }
            }
          });
        });

        if (window.mermaid) {
          if (selectedThemeVariant === "dark" || selectedThemeVariant === "hacker") {
            mermaid.initialize({ theme: 'dark' });
            location.reload();
          } else {
            mermaid.initialize({ theme: 'default' });
            location.reload();
          }
        }

        var utterances = document.querySelector('iframe');
        if (utterances) {
          utterances.contentWindow.postMessage({
            type: 'set-theme',
            theme: selectedThemeVariant === "dark" || selectedThemeVariant === "hacker" ? 'photon-dark' : selectedThemeVariant === 'kimbie' ? 'github-dark-orange' : 'github-light',
          }, 'https://utteranc.es');
        }
      });
    }) : null;
  


  
    
    var langprefix = JSON.parse("\"\"");
    var searchResults = null;
    var searchMenu = null;
    var searchText = null;
    
    
    var enableSearchHighlight = JSON.parse("true");
    
    var enableSearch = JSON.parse("true");

    var fuse = null;

    if (enableSearch) {
      (function initFuse() {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', baseurl + langprefix + "/index.json");
        xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
        xhr.onload = function () {
          if (xhr.status === 200) {
            fuse = new Fuse(JSON.parse(xhr.response.toString('utf-8')), {
              keys: ['title', 'description', 'content'],
              includeMatches: enableSearchHighlight,
              shouldSort: true,
              threshold: 0.4,
              location: 0,
              distance: 100,
              maxPatternLength: 32,
              minMatchCharLength: 1,
            });
          }
          else {
            console.error(`[${xhr.status}]Error:`, xhr.statusText);
          }
        };
        xhr.send();
      })();
    }
    
    function makeLi(ulElem, obj) {
      var li = document.createElement('li');
      li.className = 'search-result__item';
      
      var a = document.createElement('a');
      a.innerHTML = obj.title;
      a.setAttribute('class', 'search-result__item--title');
      a.setAttribute('href', obj.permalink);

      var descDiv = document.createElement('div');
      descDiv.setAttribute('class', 'search-result__item--desc');
      if (obj.description) {
        descDiv.innerHTML = obj.description;
      } else if (obj.content) {
        descDiv.innerHTML = obj.content.substring(0, 80);
      }
      
      li.appendChild(a);
      li.appendChild(descDiv);
      ulElem.appendChild(li);
    }

    function makeHighlightLi(ulElem, obj) {
      var li = document.createElement('li');
      li.className = 'search-result__item';
      var descDiv = null;

      var a = document.createElement('a');
      a.innerHTML = obj.item.title;
      a.setAttribute('class', 'search-result__item--title');
      a.setAttribute('href', obj.item.uri);

      if (obj.matches && obj.matches.length) {
        for (var i = 0; i < obj.matches.length; i++) {
          if ('title' === obj.matches[i].key) {
            a = document.createElement('a');
            a.innerHTML = generateHighlightedText(obj.matches[i].value, obj.matches[i].indices);
            a.setAttribute('class', 'search-result__item--title');
            a.setAttribute('href', obj.item.uri);
          }
          
          if ('description' === obj.matches[i].key) {
            descDiv = document.createElement('div');
            descDiv.setAttribute('class', 'search-result__item--desc');
            descDiv.innerHTML = generateHighlightedText(obj.item.description, obj.matches[i].indices);
          } else if ('content' === obj.matches[i].key) {
            if (!descDiv) {
              descDiv = document.createElement('div');
              descDiv.setAttribute('class', 'search-result__item--desc');
              descDiv.innerHTML = generateHighlightedText(obj.item.content.substring(0, 80), obj.matches[i].indices);
            }
          } else {
            if (obj.item.description) {
              descDiv = document.createElement('div');
              descDiv.setAttribute('class', 'search-result__item--desc');
              descDiv.innerHTML = obj.item.description;
            } else {
              descDiv = document.createElement('div');
              descDiv.setAttribute('class', 'search-result__item--desc');
              descDiv.innerHTML = obj.item.content.substring(0, 80);
            }
          }
        }

        li.appendChild(a);
        if (descDiv) {
          li.appendChild(descDiv);
        }
        if (li) {
          ulElem.appendChild(li);
        }
      }
    }

    function renderSearchResults(searchText, results) {
      searchResults = document.getElementById('search-results');
      searchMenu = document.getElementById('search-menu');
      searchResults.setAttribute('class', 'dd is-active');
      
      var ul = document.createElement('ul');
      ul.setAttribute('class', 'dd-content search-content');

      if (results.length) {
        results.forEach(function (result) {
          var li = document.createElement('li');
          var a = document.createElement('a');
          a.setAttribute('href', result.uri);
          a.setAttribute('class', 'dd-item');
          a.appendChild(li);

          var titleDiv = document.createElement('div');
          titleDiv.innerHTML = result.title;
          titleDiv.setAttribute('class', 'search-result__item--title');

          var descDiv = document.createElement('div');
          descDiv.setAttribute('class', 'search-result__item--desc');
          if (result.description) {
            descDiv.innerHTML = result.description;
          } else if (result.content) {
            descDiv.innerHTML = result.content.substring(0, 80);
          }

          li.appendChild(titleDiv);
          li.appendChild(descDiv);
          ul.appendChild(a);
        });
      } else {
        var li = document.createElement('li');
        li.setAttribute('class', 'dd-item');
        li.innerText = 'No results found';
        ul.appendChild(li);
      }

      while (searchMenu.hasChildNodes()) {
        searchMenu.removeChild(
          searchMenu.lastChild
        );
      }
      
      searchMenu.appendChild(ul);
    }

    function renderSearchHighlightResults(searchText, results) {
      searchResults = document.getElementById('search-results');
      searchMenu = document.getElementById('search-menu');
      searchResults.setAttribute('class', 'dd is-active');

      var ul = document.createElement('ul');
      ul.setAttribute('class', 'dd-content search-content');

      if (results.length) {
        results.forEach(function (result) {
          var li = document.createElement('li');
          var a = document.createElement('a');
          var descDiv = null;

          a.setAttribute('href', result.item.uri);
          a.setAttribute('class', 'dd-item');
          a.appendChild(li);

          var titleDiv = document.createElement('div');
          titleDiv.innerHTML = result.item.title;
          titleDiv.setAttribute('class', 'search-result__item--title');
          
          if (result.matches && result.matches.length) {
            for (var i = 0; i < result.matches.length; i++) {
              if ('title' === result.matches[i].key) {
                titleDiv.innerHTML = generateHighlightedText(result.matches[i].value, result.matches[i].indices);
              }

              if ('description' === result.matches[i].key) {
                descDiv = document.createElement('div');
                descDiv.setAttribute('class', 'search-result__item--desc');
                descDiv.innerHTML = generateHighlightedText(result.item.description, result.matches[i].indices);
              } else if ('content' === result.matches[i].key) {
                if (!descDiv) {
                  descDiv = document.createElement('div');
                  descDiv.setAttribute('class', 'search-result__item--desc');
                  descDiv.innerHTML = generateHighlightedText(result.item.content.substring(0, 80), result.matches[i].indices);
                }
              } else {
                if (result.item.description) {
                  descDiv = document.createElement('div');
                  descDiv.setAttribute('class', 'search-result__item--desc');
                  descDiv.innerHTML = result.item.description;
                } else {
                  descDiv = document.createElement('div');
                  descDiv.setAttribute('class', 'search-result__item--desc');
                  descDiv.innerHTML = result.item.content.substring(0, 80);
                }
              }
            }
            
            li.appendChild(titleDiv);
            if (descDiv) {
              li.appendChild(descDiv);
            }
            ul.appendChild(a);
          }
        });
      } else {
        var li = document.createElement('li');
        li.setAttribute('class', 'dd-item');
        li.innerText = 'No results found';
        ul.appendChild(li);
      }

      while (searchMenu.hasChildNodes()) {
        searchMenu.removeChild(
          searchMenu.lastChild
        );
      }
      searchMenu.appendChild(ul);
    }

    function renderSearchResultsMobile(searchText, results) {
      searchResults = document.getElementById('search-mobile-results');

      var content = document.createElement('div');
      content.setAttribute('class', 'mobile-search__content');

      if (results.length > 0) {
        results.forEach(function (result) {
          var item = document.createElement('a');
          item.setAttribute('href', result.uri);
          item.innerHTML = '<div class="mobile-search__item"><div class="mobile-search__item--title">📄 ' + result.title + '</div><div class="mobile-search__item--desc">' + (result.description ? result.description : result.content) + '</div></div>';
          content.appendChild(item);
        });
      } else {
        var item = document.createElement('span');
        content.appendChild(item);
      }

      let wrap = document.getElementById('search-mobile-results');
      while (wrap.firstChild) {
        wrap.removeChild(wrap.firstChild)
      }
      searchResults.appendChild(content);      
    }

    function renderSearchHighlightResultsMobile(searchText, results) {
      searchResults = document.getElementById('search-mobile-results');

      var ul = document.createElement('div');
      ul.setAttribute('class', 'mobile-search__content');

      if (results.length) {
        results.forEach(function (result) {
          var li = document.createElement('li');
          var a = document.createElement('a');
          var descDiv = null;

          a.setAttribute('href', result.item.uri);
          a.appendChild(li);
          li.setAttribute('class', 'mobile-search__item');

          var titleDiv = document.createElement('div');
          titleDiv.innerHTML = result.item.title;
          titleDiv.setAttribute('class', 'mobile-search__item--title');
          
          if (result.matches && result.matches.length) {
            for (var i = 0; i < result.matches.length; i++) {
              if ('title' === result.matches[i].key) {
                titleDiv.innerHTML = generateHighlightedText(result.matches[i].value, result.matches[i].indices);
              }

              if ('description' === result.matches[i].key) {
                descDiv = document.createElement('div');
                descDiv.setAttribute('class', 'mobile-search__item--desc');
                descDiv.innerHTML = generateHighlightedText(result.item.description, result.matches[i].indices);
              } else if ('content' === result.matches[i].key) {
                if (!descDiv) {
                  descDiv = document.createElement('div');
                  descDiv.setAttribute('class', 'mobile-search__item--desc');
                  descDiv.innerHTML = generateHighlightedText(result.item.content.substring(0, 150), result.matches[i].indices);
                }
              } else {
                if (result.item.description) {
                  descDiv = document.createElement('div');
                  descDiv.setAttribute('class', 'mobile-search__item--desc');
                  descDiv.innerHTML = result.item.description;
                } else {
                  descDiv = document.createElement('div');
                  descDiv.setAttribute('class', 'mobile-search__item--desc');
                  descDiv.innerHTML = result.item.content.substring(0, 150);
                }
              }
            }
            
            li.appendChild(titleDiv);
            if (descDiv) {
              li.appendChild(descDiv);
            }
            ul.appendChild(a);
          }
        });
      } else {
        var item = document.createElement('span');
        ul.appendChild(item);
      }

      let wrap = document.getElementById('search-mobile-results');
      while (wrap.firstChild) {
        wrap.removeChild(wrap.firstChild)
      }
      searchResults.appendChild(ul);
    }

    function generateHighlightedText(text, regions) {
      if (!regions) {
        return text;
      }

      var content = '', nextUnhighlightedRegionStartingIndex = 0;

      regions.forEach(function(region) {
        if (region[0] === region[1]) {
          return null;
        }
        
        content += '' +
          text.substring(nextUnhighlightedRegionStartingIndex, region[0]) +
          '<span class="search__highlight">' +
            text.substring(region[0], region[1] + 1) +
          '</span>' +
        '';
        nextUnhighlightedRegionStartingIndex = region[1] + 1;
      });

      content += text.substring(nextUnhighlightedRegionStartingIndex);

      return content;
    };

    var searchElem = document.getElementById('search');
    var searchMobile = document.getElementById('search-mobile');
    var searchResultsContainer = document.getElementById('search-results');

    searchElem ? 
    searchElem.addEventListener('input', function(e) {
      if (!e.target.value | window.innerWidth < 770) {
        searchResultsContainer ? searchResultsContainer.setAttribute('class', 'dd') : null;
        return null;
      }

      searchText = e.target.value;
      var results = fuse.search(e.target.value);

      if (enableSearchHighlight) {
        renderSearchHighlightResults(searchText, results);
      } else {
        renderSearchResults(searchText, results);
      }

      var dropdownItems = searchResultsContainer.querySelectorAll('.dd-item');
      dropdownItems ? dropdownItems.forEach(function (item) {
        item.addEventListener('mousedown', function (e) {
          e.target.click();
        });
      }) : null;
    }) : null;

    searchElem ? 
    searchElem.addEventListener('blur', function() {
      if (window.innerWidth < 770) {
        return null;
      }
      searchResultsContainer ? searchResultsContainer.setAttribute('class', 'dd') : null;
    }) : null;

    searchElem ? 
    searchElem.addEventListener('click', function(e) {
      if (window.innerWidth < 770) {
        return null;
      }
      if (!e.target.value) {
        searchResultsContainer ? searchResultsContainer.setAttribute('class', 'dd') : null;
        return null;
      }

      searchText = e.target.value;
      var results = fuse.search(e.target.value);

      if (enableSearchHighlight) {
        renderSearchHighlightResults(searchText, results);
      } else {
        renderSearchResults(searchText, results);
      }

      var dropdownItems = searchResultsContainer.querySelectorAll('.dd-item');
      dropdownItems ? dropdownItems.forEach(function (item) {
        item.addEventListener('mousedown', function (e) {
          e.target.click();
        });
      }) : null;
    }) : null;

    var searchMenuElem = document.getElementById("search-menu");
    var activeItem = document.querySelector('#search-menu .dd-item.is-active');
    var activeIndex = null;
    var items = null;
    var searchContainerMaxHeight = 350;

    searchElem ? 
    searchElem.addEventListener('keydown', function(e) {
      if (window.innerWidth < 770) {
        return null;
      }

      var items = document.querySelectorAll('#search-menu .dd-item');
      
      if (e.key === 'ArrowDown') {
        if (activeIndex === null) {
          activeIndex = 0;
          items[activeIndex].classList.remove('is-active');
        } else {
          items[activeIndex].classList.remove('is-active');
          activeIndex = activeIndex === items.length - 1 ? 0 : activeIndex + 1;
        }
        items[activeIndex].classList.add('is-active');

        let overflowedPixel = items[activeIndex].offsetTop + items[activeIndex].clientHeight - searchContainerMaxHeight;
        if (overflowedPixel > 0) {
          document.querySelector(".search-content").scrollTop += items[activeIndex].getBoundingClientRect().height;
        } else if (activeIndex === 0) {
          document.querySelector(".search-content").scrollTop = 0;
        }
      } else if (e.key === 'ArrowUp') {
        if (activeIndex === null) {
          activeIndex = items.length - 1;
          items[activeIndex].classList.remove('is-active');
        } else {
          items[activeIndex].classList.remove('is-active');
          activeIndex = activeIndex === 0 ? items.length - 1 : activeIndex - 1;
        }
        items[activeIndex].classList.add('is-active');
        
        let overflowedPixel = items[activeIndex].offsetTop + items[activeIndex].clientHeight - searchContainerMaxHeight;
        if (overflowedPixel < 0) {
          document.querySelector(".search-content").scrollTop -= items[activeIndex].getBoundingClientRect().height;
        } else {
          document.querySelector(".search-content").scrollTop = overflowedPixel + items[activeIndex].getBoundingClientRect().height;
        }
      } else if (e.key === 'Enter') {
        var currentItemLink = items[activeIndex].getAttribute('href');
        if (currentItemLink) {
          location.href = currentItemLink;
        }
      } else if (e.key === 'Escape') {
        e.target.value = null;
        if (searchResults) {
          searchResults.classList.remove('is-active');
        }
      }
    }) : null;

    searchMobile ? 
    searchMobile.addEventListener('input', function(e) {
      if (!e.target.value) {
        let wrap = document.getElementById('search-mobile-results');
        while (wrap.firstChild) {
          wrap.removeChild(wrap.firstChild);
        }
        return null;
      }

      searchText = e.target.value;
      var results = fuse.search(e.target.value);
      
      if (enableSearchHighlight) {
        renderSearchHighlightResultsMobile(searchText, results);
      } else {
        renderSearchResultsMobile(searchText, results);
      }

      var dropdownItems = searchResultsContainer.querySelectorAll('.dd-item');
      dropdownItems ? dropdownItems.forEach(function (item) {
        item.addEventListener('mousedown', function (e) {
          e.target.click();
        });
      }) : null;
    }) : null;
  
  }
</script>
    


<link rel="stylesheet" href="/css/main.min.css">


    <meta name="description" content="Docker是一个应用层的抽象容器，将代码和依赖打包在一起。便携高效。" />
<meta name="keywords" content="">
<meta name="created" content="2020-01-28T00:34:39&#43;0900">
<meta name="modified" content="2020-01-28T00:34:39&#43;0900">


<meta property="og:site_name" content="codthing">
<meta property="og:title" content="Docker">
<meta property="og:url" content="https://codthing.github.io/nodejs/docker/docker/">
<meta property="og:type" content="article">

<meta name="generator" content="Hugo 0.95.0" />
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">
<link rel="canonical" href="https://codthing.github.io/nodejs/docker/docker/">
<link rel="manifest" href="/manifest.json">

  <link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="/favicon/apple-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="114x114" href="/favicon/apple-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href="/favicon/apple-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-icon-180x180.png">
  <link rel="icon" type="image/png" sizes="192x192" href="/favicon/android-icon-192x192.png">
  <link rel="icon" type="image/png" sizes="192x192" href="/favicon/android-icon-512x512.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon/favicon-96x96.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
  <meta name="msapplication-TileColor" content="#ffffff">
  <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">

    <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebPage",
    "headline": "Docker",
    "datePublished": "2020-01-28T00:34:39+09:00",
    "dateModified": "2020-01-28T00:34:39+09:00",
    "url" : "https://codthing.github.io/nodejs/docker/docker/",
    "description": "Docker是一个应用层的抽象容器，将代码和依赖打包在一起。便携高效。",
    "mainEntityOfPage": {
      "@type": "WebPage",
      "@id": "https://codthing.github.io/"
    },
    "publisher": {
      "@type": "Organization",
      "name": "codthing",
      "url": "https://codthing.github.io/"
    }
  }
</script>

    

</head>


<body id="root" class="theme__dark">
    <script>
        var rootElem = document.getElementById('root');
        var themeOptions = JSON.parse("[\"dark\",\"light\"]");
        var localTheme = localStorage.getItem('theme');

        if (localTheme) {
            if (themeOptions && themeOptions.length > 0) {
                themeOptions.includes(localTheme) ? 
                rootElem.className = `theme__${localTheme}` :
                rootElem.className = `theme__${themeOptions[0]}`;
            }
        }
    </script>
    
    <div id="container">
        <div id="myDrawer" class="drawer" style="">
  <div class="drawer__header">
    <a href="/" class="drawer__header--text">
      
    </a>
    <div class="grow"></div>
    <div class="drawer__close">
      <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentColor" d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"/></svg>
    </div>
  </div>

  <div class="drawer__body">
    <div class="menu">
  <h6 class="menu__label">
    
      Docker
    
  </h6>
  <ul>
    
    
      
  
  
  
  
  
  
  

  
  
  
  
  
  <li class="menu__title--collapse " data-depth="0" data-permalink="https://codthing.github.io/nodejs/nodebase/">
    <span class="menu__title--collapse-text">
      Node.js
    </span>
    <span class="menu__title--icon right">
      
        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="currentColor" d="M9.29 15.88L13.17 12 9.29 8.12c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0l4.59 4.59c.39.39.39 1.02 0 1.41L10.7 17.3c-.39.39-1.02.39-1.41 0-.38-.39-.39-1.03 0-1.42z"/></svg>
      
    </span>
  </li>
  <ul class="menu__list " data-data=/nodebase/ data-link=https://codthing.github.io/nodejs/docker/docker/>
    
      
        
        
        <li>
          <a href="https://codthing.github.io/nodejs/nodebase/node-start/" class="menu__title " data-depth="0">快速开始</a>
        </li>
      
    
      
        
        
        <li>
          <a href="https://codthing.github.io/nodejs/nodebase/node-programming/" class="menu__title " data-depth="0">异步编程</a>
        </li>
      
    
      
        
        
        <li>
          <a href="https://codthing.github.io/nodejs/nodebase/node-engine/" class="menu__title " data-depth="0">引擎和运行方式</a>
        </li>
      
    
      
        
        
        <li>
          <a href="https://codthing.github.io/nodejs/nodebase/node-exit/" class="menu__title " data-depth="0">退出 Node.js 程序</a>
        </li>
      
    
      
        
        
        <li>
          <a href="https://codthing.github.io/nodejs/nodebase/node-var/" class="menu__title " data-depth="0">读取环境变量</a>
        </li>
      
    
      
        
        
        <li>
          <a href="https://codthing.github.io/nodejs/nodebase/node-repl/" class="menu__title " data-depth="0">使用 REPL 测试代码</a>
        </li>
      
    
      
        
        
        <li>
          <a href="https://codthing.github.io/nodejs/nodebase/node-cmd/" class="menu__title " data-depth="0">命令行</a>
        </li>
      
    
      
        
        
        <li>
          <a href="https://codthing.github.io/nodejs/nodebase/node-export/" class="menu__title " data-depth="0">使用 exports</a>
        </li>
      
    
  </ul>
  

    
      
  
  
  
  
  
  
  

  
  
  
  
  
  
  
  <li class="">
    <a href="https://codthing.github.io/nodejs/adonis/"
      class="menu__title ">Adonis.js</a>
  </li>
  

    
      
  
  
  
  
  
  
  

  
  
  
  
  
  
  
  <li class="">
    <a href="https://codthing.github.io/nodejs/orm/"
      class="menu__title ">ORM</a>
  </li>
  

    
      
  
  
  
  
  
  
  

  
  
  
  
  
  
  
  <li class="">
    <a href="https://codthing.github.io/nodejs/nginx/"
      class="menu__title ">Nginx</a>
  </li>
  

    
      
  
  
  
  
  
  
  

  
  
  
  
  
  
  
  <li class="active">
    <a href="https://codthing.github.io/nodejs/docker/"
      class="menu__title active">Docker</a>
  </li>
  

    
  </ul>
</div>



<script>
  var menuTitle = document.querySelectorAll('.menu__title');
  var modal = document.getElementById("myModal");
  var drawer = document.getElementById('myDrawer');

  var closeDrawer = function () {
    setTimeout(function () {
      modal.style.opacity = 0;
      drawer.style.left = '-100%';
      modal.style.left = '-100%';
    }, 250);
  }

  menuTitle ? 
  menuTitle.forEach(function(elem) {
    elem.onclick = function() {
      closeDrawer();
      localStorage.setItem('isDrawerOpen', 'false');
    }
  }) : null;
</script>
  </div>
</div>
<div id="myModal" class="modal" style=""></div>

<script>
  var isDrawerOpen = localStorage.getItem('isDrawerOpen');
  var modal = document.getElementById("myModal");
  var drawer = document.getElementById('myDrawer');
  
  
  var languagedir = JSON.parse("\"ltr\"");

  var openDrawer = function () {
    modal.style.opacity = 1;
    
    if (languagedir === "rtl") {
      modal.style.right = 0;
      drawer.style.right = 0;
    } else {
      modal.style.left = 0;
      drawer.style.left = 0;
    }
  }

  if (isDrawerOpen && isDrawerOpen === 'true') {
    openDrawer();
  }
</script>
        
<nav class="nav">
  <div class="navbar__wrapper" data-bgimg="false">
    <div class="divider">
      <div class="navbar lmr">
        <div id="siteLogo" class="navbar__logo--wrapper">
  
    &nbsp;&nbsp;
  
  
    <a href="/" title="" rel="home" class="navbar__logo--text-link">
      <h6 class="navbar__logo--text" data-bgimg="false"></h6>
    </a>
  
</div>
        
        <div class="navbar__menu--wrapper">
          <div id="tabletLogo" class="hide">
  
    <a href="/" rel="home" class="navbar__logo--link">
      <div class="navbar__icons--icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentColor" d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z"/></svg>
      </div>
    </a>
  
</div>
          <div id="mobileLogo" class="hide">
  <a href="#" class="navbar__logo--link">
    <div class="navbar__icons--icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentColor" d="M4 18h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zm0-5h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1s.45 1 1 1zM3 7c0 .55.45 1 1 1h16c.55 0 1-.45 1-1s-.45-1-1-1H4c-.55 0-1 .45-1 1z"/></svg>
    </div>
  </a>
</div>
          <span id="navMenuMobile" class="hide">
  <button id="navCollapseBtn" class="navbar__dropdown--title" aria-label="Section Menu" data-dir="ltr">
    
      nodejs
    
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M8.12 9.29L12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0 .39.39.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7c-.39-.39-.39-1.02 0-1.41.39-.38 1.03-.39 1.42 0z"/></svg>
  </button>
  <div class="navbar__collapse" data-open="false">
  <ul>
    

  
  
  
  
  <li class="navbar__menu--mobile-item ">
    <a href="/javascript" class="">JavaScript</a>
  </li>

  
  
  
  
  <li class="navbar__menu--mobile-item active">
    <a href="/nodejs" class="active">Nodejs</a>
  </li>

  
  
  
  
  <li class="navbar__menu--mobile-item ">
    <a href="/react" class="">React</a>
  </li>

  
  
  
  
  <li class="navbar__menu--mobile-item ">
    <a href="/react-patterns" class="">React-Patterns</a>
  </li>

  
  
  
  
  <li class="navbar__menu--mobile-item ">
    <a href="/react-native" class="">React-Native</a>
  </li>

  
  
  
  
  <li class="navbar__menu--mobile-item ">
    <a href="/rust" class="">Rust</a>
  </li>

  
  
  
  
  <li class="navbar__menu--mobile-item ">
    <a href="/others" class="">Others</a>
  </li>

  </ul>
</div>
</span>
          <ul id="navMenu" class="navbar__menu">
            

  
  
  
  
  <li class="navbar__menu--item ">
    <a href="/javascript" data-bgimg="false">JavaScript</a>
  </li>

  
  
  
  
  <li class="navbar__menu--item active">
    <a href="/nodejs" data-bgimg="false">Nodejs</a>
  </li>

  
  
  
  
  <li class="navbar__menu--item ">
    <a href="/react" data-bgimg="false">React</a>
  </li>

  
  
  
  
  <li class="navbar__menu--item ">
    <a href="/react-patterns" data-bgimg="false">React-Patterns</a>
  </li>

  
  
  
  
  <li class="navbar__menu--item ">
    <a href="/react-native" data-bgimg="false">React-Native</a>
  </li>

  
  
  
  
  <li class="navbar__menu--item ">
    <a href="/rust" data-bgimg="false">Rust</a>
  </li>

  
  
  
  
  <li class="navbar__menu--item ">
    <a href="/others" data-bgimg="false">Others</a>
  </li>

          </ul>
        </div>
        <div class="grow"></div>
        <div id="siteSearch">
          

<div class="search" data-bgimg="false">
  <span class="icon">
    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M15.5 14h-.79l-.28-.27c1.2-1.4 1.82-3.31 1.48-5.34-.47-2.78-2.79-5-5.59-5.34-4.23-.52-7.79 3.04-7.27 7.27.34 2.8 2.56 5.12 5.34 5.59 2.03.34 3.94-.28 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
  </span>
  <input id="search" aria-label="Site Search" class="input" type="text" autocomplete="off" placeholder="Search">
  <div id="search-results" class="dropdown">
    <div id="search-menu" class="dropdown-menu">
    </div>
  </div>
</div>


        </div>
        <div id="mobileSearch" class="hide">
          
<div id="mobileSearchBtn" class="mobile-search__btn">
  <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" fill="currentColor" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M15.5 14h-.79l-.28-.27c1.2-1.4 1.82-3.31 1.48-5.34-.47-2.78-2.79-5-5.59-5.34-4.23-.52-7.79 3.04-7.27 7.27.34 2.8 2.56 5.12 5.34 5.59 2.03.34 3.94-.28 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0 .41-.41.41-1.08 0-1.49L15.5 14zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
</div>

<div id="search-mobile-container" class="mobile-search hide">
  <div class="mobile-search__top">
    <input id="search-mobile" type="text" aria-label="Mobile Search" placeholder="Search..." class="mobile-search__top--input"/>
    <div id="search-mobile-close" class="mobile-search__top--icon">
      <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path opacity=".87" fill="none" d="M0 0h24v24H0V0z"/><path fill="currentColor" d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"/></svg>
    </div>
  </div>
  <div id="search-mobile-results" class="mobile-search__body">
    
  </div>
</div>

        </div>
        <div class="navbar__icons">
  
  
<button id="toggleToDark" class="navbar__icons--icon" aria-label="Toggle to dark mode">
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none" /><path fill="currentColor" d="M20 15.31L23.31 12 20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69zM12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z"/></svg>
</button>
<button id="toggleToLight" class="navbar__icons--icon" aria-label="Toggle to light mode">
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path fill="currentColor" d="M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zM12 18c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm0-10c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z"/></svg>
</button>
<script>
  var theme = localStorage.getItem('theme');
  var toggleToLightBtn = document.getElementById('toggleToLight');
  var toggleToDarkBtn = document.getElementById('toggleToDark');

  if (theme && theme === 'dark') {
    toggleToLightBtn.className = 'navbar__icons--icon';
    toggleToDarkBtn.className = 'hide';
  } else {
    toggleToLightBtn.className = 'hide';
    toggleToDarkBtn.className = 'navbar__icons--icon';
  }
</script>

  <div class="navbar__icons--icon">
    <a href="https://github.com/codthing" title="Github repository" aria-label="Github repository" target="_blank" rel="noreferrer">
    <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="22" height="22"><path d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.5,4.7,2.2,8.9,6.3,10.5C8.7,21.4,9,21.2,9,20.8v-1.6c0,0-0.4,0.1-0.9,0.1 c-1.4,0-2-1.2-2.1-1.9c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1 c0.4,0,0.7-0.1,0.9-0.2c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6c0-0.4,0-0.9,0.2-1.3 C7.2,6.1,7.4,6,7.5,6c0,0,0.1,0,0.1,0C8.1,6.1,9.1,6.4,10,7.3C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3c0.9-0.9,2-1.2,2.5-1.3 c0,0,0.1,0,0.1,0c0.2,0,0.3,0.1,0.4,0.3C17,6.7,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4c0.7,0.8,1.2,1.8,1.2,3c0,2.2-1.7,3.5-4,4 c0.6,0.5,1,1.4,1,2.3v2.6c0,0.3,0.3,0.6,0.7,0.5c3.7-1.5,6.3-5.1,6.3-9.3C22,6.1,16.9,1.4,10.9,2.1z"/></svg>
    </a>
  </div>
</div>


      </div>
    </div>
  </div>
</nav>

<script>
  var siteLogo = document.getElementById('siteLogo');
  var tabletLogo = document.getElementById('tabletLogo');
  var mobileLogo = document.getElementById('mobileLogo');
  var navMenu = document.getElementById('navMenu');
  var navMenuMobile = document.getElementById('navMenuMobile');
  var siteSearch = document.getElementById('siteSearch');
  var mobileSearch = document.getElementById('mobileSearch');
  
  enquire.register("screen and (max-width:1280px)", {
    match: function () {
      siteLogo.className = 'navbar__logo--wrapper';
      tabletLogo.className = 'hide';
      mobileLogo.className = 'hide';
      navMenu.className = 'navbar__menu';
      navMenuMobile.className = 'hide';
      siteSearch.className = '';
      mobileSearch.className = 'hide';
    },
    unmatch: function () {
      siteLogo.className = 'navbar__logo--wrapper';
      tabletLogo.className = 'hide';
      mobileLogo.className = 'hide';
      navMenu.className = 'navbar__menu';
      navMenuMobile.className = 'hide';
      siteSearch.className = '';
      mobileSearch.className = 'hide';
    },
  }).register("screen and (max-width:960px)", {
    match: function () {
      siteLogo.className = 'hide';
      tabletLogo.className = '';
      mobileLogo.className = 'hide';
      navMenu.className = 'navbar__menu';
      navMenuMobile.className = 'hide';
      siteSearch.className = 'hide';
      mobileSearch.className = 'navbar__icons--icon';
    },
    unmatch: function () {
      siteLogo.className = 'navbar__logo--wrapper';
      tabletLogo.className = 'hide';
      mobileLogo.className = 'hide';
      navMenu.className = 'navbar__menu';
      navMenuMobile.className = 'hide';
      siteSearch.className = '';
      mobileSearch.className = 'hide';
    },
  }).register("screen and (max-width:600px)", {
    match: function () {
      siteLogo.className = 'hide';
      tabletLogo.className = 'hide';
      mobileLogo.className = '';
      navMenu.className = 'hide';
      navMenuMobile.className = '';
      siteSearch.className = 'hide';
      mobileSearch.className = 'navbar__icons--icon';
    },
    unmatch: function () {
      siteLogo.className = 'hide';
      tabletLogo.className = '';
      mobileLogo.className = 'hide';
      navMenu.className = 'navbar__menu';
      navMenuMobile.className = 'hide';
      siteSearch.className = 'hide';
      mobileSearch.className = 'navbar__icons--icon';
    },
  });
</script>

        
  <div class="top">
  <div class="header__wrapper bgcolor__header">
    <div class="divider">
      <div class="lmr">
        <h2 class="title">Docker</h2>
      </div>
    </div>
  </div>

  <div class="header__wrapper bgcolor__breadcrumb">
    <div class="divider">
      <div class="lmr flexbox">
        
          <nav class="breadcrumb" aria-label="breadcrumbs" data-is-blog="false">
  
  <ol>
    
  
  
  
  
  
  
  
  <li >
    
      <a href="https://codthing.github.io/" class="capitalize">codthing</a>
    
  </li>
  
  
  <li >
    
      <a href="https://codthing.github.io/nodejs/" class="capitalize">Nodejs</a>
    
  </li>
  
  
  <li >
    
      <a href="https://codthing.github.io/nodejs/docker/" class="capitalize">Docker</a>
    
  </li>
  
  
  <li  class="is-active" >
    
      <span>Docker</span>
    
  </li>
  
  </ol>
  
</nav>
        
        <div class="grow"></div>
        
  <label class="switch switch__rel">
    
      <input id="toggle-sidebar" aria-label="Toggle Sidebar Visibility" type="checkbox" checked />
      <span class="slider">
        <span class="slider__icon ">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentColor" d="M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03 0 1.42.39.39 1.02.39 1.41 0l6.59-6.59c.39-.39.39-1.02 0-1.41l-6.58-6.6c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L16.17 11H5c-.55 0-1 .45-1 1s.45 1 1 1z"/></svg>
        </span>
        <span class="slider__icon hide">
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentColor" d="M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42-.39-.39-1.02-.39-1.41 0l-6.59 6.59c-.39.39-.39 1.02 0 1.41l6.59 6.59c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1z"/></svg>
        </span>
      </span>
    
    
  </label>

        
      </div>
    </div>
  </div>
</div>

        
  

<div class="mid">
  <div class="divider">
    
    <nav id="single-menu" class="l" data-dir="ltr">
      
        <div class="menu">
  <h6 class="menu__label">
    
      Docker
    
  </h6>
  <ul>
    
    
      
  
  
  
  
  
  
  

  
  
  
  
  
  <li class="menu__title--collapse " data-depth="0" data-permalink="https://codthing.github.io/nodejs/nodebase/">
    <span class="menu__title--collapse-text">
      Node.js
    </span>
    <span class="menu__title--icon right">
      
        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path fill="currentColor" d="M9.29 15.88L13.17 12 9.29 8.12c-.39-.39-.39-1.02 0-1.41.39-.39 1.02-.39 1.41 0l4.59 4.59c.39.39.39 1.02 0 1.41L10.7 17.3c-.39.39-1.02.39-1.41 0-.38-.39-.39-1.03 0-1.42z"/></svg>
      
    </span>
  </li>
  <ul class="menu__list " data-data=/nodebase/ data-link=https://codthing.github.io/nodejs/docker/docker/>
    
      
        
        
        <li>
          <a href="https://codthing.github.io/nodejs/nodebase/node-start/" class="menu__title " data-depth="0">快速开始</a>
        </li>
      
    
      
        
        
        <li>
          <a href="https://codthing.github.io/nodejs/nodebase/node-programming/" class="menu__title " data-depth="0">异步编程</a>
        </li>
      
    
      
        
        
        <li>
          <a href="https://codthing.github.io/nodejs/nodebase/node-engine/" class="menu__title " data-depth="0">引擎和运行方式</a>
        </li>
      
    
      
        
        
        <li>
          <a href="https://codthing.github.io/nodejs/nodebase/node-exit/" class="menu__title " data-depth="0">退出 Node.js 程序</a>
        </li>
      
    
      
        
        
        <li>
          <a href="https://codthing.github.io/nodejs/nodebase/node-var/" class="menu__title " data-depth="0">读取环境变量</a>
        </li>
      
    
      
        
        
        <li>
          <a href="https://codthing.github.io/nodejs/nodebase/node-repl/" class="menu__title " data-depth="0">使用 REPL 测试代码</a>
        </li>
      
    
      
        
        
        <li>
          <a href="https://codthing.github.io/nodejs/nodebase/node-cmd/" class="menu__title " data-depth="0">命令行</a>
        </li>
      
    
      
        
        
        <li>
          <a href="https://codthing.github.io/nodejs/nodebase/node-export/" class="menu__title " data-depth="0">使用 exports</a>
        </li>
      
    
  </ul>
  

    
      
  
  
  
  
  
  
  

  
  
  
  
  
  
  
  <li class="">
    <a href="https://codthing.github.io/nodejs/adonis/"
      class="menu__title ">Adonis.js</a>
  </li>
  

    
      
  
  
  
  
  
  
  

  
  
  
  
  
  
  
  <li class="">
    <a href="https://codthing.github.io/nodejs/orm/"
      class="menu__title ">ORM</a>
  </li>
  

    
      
  
  
  
  
  
  
  

  
  
  
  
  
  
  
  <li class="">
    <a href="https://codthing.github.io/nodejs/nginx/"
      class="menu__title ">Nginx</a>
  </li>
  

    
      
  
  
  
  
  
  
  

  
  
  
  
  
  
  
  <li class="active">
    <a href="https://codthing.github.io/nodejs/docker/"
      class="menu__title active">Docker</a>
  </li>
  

    
  </ul>
</div>


      
    </nav>

    <article id="list-main" class="m" data-dir="ltr">
      <div class="single" data-display="block">
  

  <article class="single__contents" data-dir="ltr">
    <h2 id="1-docker">1. Docker</h2>
<p>Docker 是一个开源的应用容器引擎，基于 <a href="https://www.runoob.com/go/go-tutorial.html" target="_blank">Go 语言</a> 并遵从 Apache2.0 协议开源。</p>
<p>Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级、可移植的容器中，然后发布到任何流行的 Linux 机器上，也可以实现虚拟化。</p>
<p>容器是完全使用沙箱机制，相互之间不会有任何接口（类似 iPhone 的 app）,更重要的是容器性能开销极低。</p>
<h2 id="2-docker-架构">2. Docker 架构</h2>
<p>Docker 平台由几个组件组成，用来构建、运行和管理容器化应用程序。</p>
<pre tabindex="0"><code>📦Docker
 ├─ 📂Repository 仓库
 │ ├─ 📂Image 镜像
 │ │ ├─ 📂Container 容器
 │ │ └─ 📂Container...
 │ └─ 📂Image...
 └─ 📂Repository...
</code></pre><pre tabindex="0"><code>📦Image 镜像
 └─ 📂基础镜像
 │ └─ 📂子镜像
 │ │ ├─ 📂官方镜像
 │ │ └─ 📂用户镜像
</code></pre><h3 id="2-1-docker-引擎">2-1. Docker 引擎</h3>
<p><p class="md__image">
  <img src="https://docs.microsoft.com/en-us/learn/modules/intro-to-docker-containers/media/2-docker-architecture.svg" alt=""  />
</p></p>
<table>
<thead>
<tr>
<th align="left">概念</th>
<th align="left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Docker Client</td>
<td align="left">Docker 客户端是一个名为 <code>docker</code> 的命令行应用程序，它提供了一个命令行界面（CLI）来与 Docker 服务器进行交互。 docker 命令使用 Docker REST API 向本地或远程服务器发送指令，并作为管理容器的主要接口。</td>
</tr>
<tr>
<td align="left">Docker Server</td>
<td align="left">Docker 服务器是一个名为 dockerd 的守护进程。 dockerd 守护进程通过 Docker REST API 响应来自客户端的请求，并且可以与其他守护进程交互。 Docker 服务器还负责跟踪容器的生命周期。</td>
</tr>
<tr>
<td align="left">Docker Objects</td>
<td align="left">创建和配置多个对象以支持容器部署。 包括网络、存储卷、插件和其他服务对象。 这些对象可以根据需要创建和部署的项目。</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th align="left">命令</th>
<th align="left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left"><code>docker</code></td>
<td align="left">查看 Docker 客户端的所有命令选项</td>
</tr>
<tr>
<td align="left"><code>docker stats --help</code></td>
<td align="left">查看 docker stats 指令的具体使用方法</td>
</tr>
</tbody>
</table>
<h3 id="2-2-docker-hub">2-2. Docker Hub</h3>
<p>Docker Hub 是一个软件即服务 (SaaS) Docker 容器注册表。</p>
<p>Docker 注册表是用来存储和分发容器镜像的存储库。</p>
<p>Docker Hub 是 Docker 用于镜像管理的默认公共注册表。</p>
<p>请记住，可以创建和使用私有 Docker 注册表或使用许多可用的云提供商。 例如，可以使用 Azure 容器注册表来存储容器映像以在多个 Azure 容器启用服务中使用。</p>
<p>当然不止 Docker Hub，远程的服务商不一样，但是操作都是一样的。</p>
<table>
<thead>
<tr>
<th>项目</th>
<th>命令</th>
<th>备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>注册</td>
<td></td>
<td>在<a href="https://hub.docker.com/" target="_blank">https://hub.docker.com</a> 免费注册一个 Docker 账号。</td>
</tr>
<tr>
<td>登录</td>
<td><code>docker login</code></td>
<td></td>
</tr>
<tr>
<td>退出</td>
<td><code>docker logout</code></td>
<td></td>
</tr>
<tr>
<td>查找镜像</td>
<td><code>docker search username</code></td>
<td>关键词 <code>username</code> 是搜索自己库的镜像，或者 <code>docker search ubuntu</code> 搜索公共库关于 ubuntu 的镜像。</td>
</tr>
<tr>
<td>拉取镜像</td>
<td><code>docker pull ubuntu</code></td>
<td></td>
</tr>
<tr>
<td>推送镜像</td>
<td><code>docker push username/ubuntu:18.0.4</code></td>
<td>在推送前，需要标志要推送的镜像 <code>docker tag ubuntu:18.0.4 username/ubuntu:18.0.4</code> ,然后列出看看是否存在 <code>docker images</code>。记得 <code>username</code> 改为自己的Hub用户名。</td>
</tr>
</tbody>
</table>
<h2 id="3-docker-镜像的工作原理">3. Docker 镜像的工作原理</h2>
<p>了解 Docker 中使用的软件、包和镜像之间的差异有助于更好地理解 Docker 镜像的工作原理。</p>
<h3 id="3-1-容器软件">3-1. 容器软件</h3>
<p>打包到容器中的软件不仅限于开发人员构建的应用程序。当谈论软件时，指的是应用程序代码、系统包、二进制文件、库、配置文件以及在容器中运行的操作系统。</p>
<h3 id="3-2-容器镜像">3-2. 容器镜像</h3>
<p>容器镜像是不可变的。一旦构建了镜像，就无法更改镜像。</p>
<p>更改镜像的 <code>唯一方法</code> 是创建新镜像。此功能保证在生产中使用的镜像与开发和 QA 中使用的镜像相同。</p>
<h3 id="3-3-主机操作系统">3-3. 主机操作系统</h3>
<p>主机操作系统是运行 Docker 引擎的操作系统。在 Linux 上运行的 Docker 容器 <code>共享主机操作系统内核</code>，不需要容器操作系统，只要二进制文件可以直接访问操作系统内核即可。</p>
<p><p class="md__image">
  <img src="https://docs.microsoft.com/en-us/learn/modules/intro-to-docker-containers/media/3-container-scratch-host-os.svg" alt=""  />
</p></p>
<p>但是，<code>Windows 容器需要容器操作系统</code>。容器依赖操作系统内核来管理文件系统、网络管理、进程调度和内存管理等服务。</p>
<h3 id="3-4-容器操作系统">3-4. 容器操作系统</h3>
<p>容器操作系统是作为打包镜像一部分的操作系统。可以灵活地 <code>在容器中包含不同版本的 Linux 或 Windows 操作系统</code>。这种灵活性能够访问特定的操作系统功能或安装应用程序可能使用的其他软件。</p>
<p><p class="md__image">
  <img src="https://docs.microsoft.com/en-us/learn/modules/intro-to-docker-containers/media/3-container-ubuntu-host-os.svg" alt=""  />
</p></p>
<p><code>容器操作系统与主机操作系统隔离</code>，是部署和运行应用程序的环境。结合镜像的不变性，这种隔离意味着在开发中运行的应用程序的环境与生产中的环境相同。</p>
<p>在示例中，使用 Ubuntu Linux 作为容器操作系统，并且该操作系统不会因开发或生产而改变。使用的镜像总是相同的。</p>
<h3 id="3-5-可堆叠文件系统">3-5. 可堆叠文件系统</h3>
<p><p class="md__image">
  <img src="https://docs.microsoft.com/en-us/learn/modules/intro-to-docker-containers/media/3-unionfs-diagram.svg" alt=""  />
</p></p>
<p>假设为 Web 应用程序构建镜像。把 Ubuntu 发行版作为一个基础镜像放在引导文件系统之上。接下来安装 Nginx 和 Web 应用程序。有效地将 Nginx 和 Web 应用程序分层放置在原始 Ubuntu 镜像之上。</p>
<p>一旦容器从镜像运行，就会创建一个最终的可写层。然而，当容器被销毁时，这一层不会继续存在。</p>
<h3 id="3-6-基础镜像">3-6. 基础镜像</h3>
<p>基础镜像是使用 Docker 临时镜像的镜像。 临时镜像是一个空容器镜像，不会创建文件系统层。 此镜像假定要运行的应用程序可以直接使用主机操作系统内核。</p>
<p>另一种说法是：没有父镜像的镜像，通常是带有像 ubuntu、busybox 或 debian 这样的操作系统的镜像。</p>
<h3 id="3-7-父镜像">3-7. 父镜像</h3>
<p>父镜像是一个“容器图像”，可以从中创建镜像。</p>
<p>例如，与其从头开始创建镜像然后安装 Ubuntu，宁愿使用已经基于 Ubuntu 的镜像。 甚至可以使用已经安装了 Nginx 的镜像。 父镜像通常包含容器操作系统。</p>
<p>另一种说法是：建立在基础镜像上并添加附加功能的镜像。</p>
<h3 id="3-8-基础镜像和父镜像的区别">3-8. 基础镜像和父镜像的区别</h3>
<p>这两种<del>镜</del>类型都允许创建可重用的镜像。 但是，基础镜像允许更好地控制最终镜像的内容。 回想一下之前的镜像是不可变的，内容只能添加而不能删减。</p>
<h3 id="3-9-dockerfile">3-9. Dockerfile</h3>
<p>Dockerfile 是一个文本文件，其中包含构建和运行 Docker 镜像的指令。定义了镜像的以下方面：</p>
<ul>
<li>用于创建新镜像的基础镜像或父镜像</li>
<li>更新操作系统和安装附加软件的命令</li>
<li>构建要包含的工件，例如已开发的应用程序</li>
<li>要公开的服务，例如存储和网络配置</li>
<li>启动容器时运行的命令</li>
</ul>
<p>假设为 ASP.NET Core 网站创建一个 Docker 镜像。 Dockerfile 可能类似于以下示例</p>
<pre tabindex="0"><code># Step 1: 为新镜像指定父镜像
FROM ubuntu:18.04

# Step 2: 更新操作系统软件包并安装其他软件
RUN apt -y update &amp;&amp;  apt install -y wget nginx software-properties-common apt-transport-https \
	&amp;&amp; wget -q https://packages.microsoft.com/config/ubuntu/18.04/packages-microsoft-prod.deb -O packages-microsoft-prod.deb \
	&amp;&amp; dpkg -i packages-microsoft-prod.deb \
	&amp;&amp; add-apt-repository universe \
	&amp;&amp; apt -y update \
	&amp;&amp; apt install -y dotnet-sdk-3.0

# Step 3: 配置Nginx环境
CMD service nginx start

# Step 4: 配置Nginx环境
COPY ./default /etc/nginx/sites-available/default

# STEP 5: 配置工作目录
WORKDIR /app

# STEP 6: 复制网站代码到容器
COPY ./website/. .

# STEP 7: 配置网络要求
EXPOSE 80:8080

# STEP 8: 定义容器中运行的进程的入口点
ENTRYPOINT [&#34;dotnet&#34;, &#34;website.dll&#34;]
</code></pre><p>之前提到过 Docker 镜像使用了可堆叠文件系统 。当构建最终的容器镜像时，每个步骤都会创建一个临时的容器镜像。这些临时镜像叠加在之前的镜像之上，并在所有步骤完成后呈现为单个图像。</p>
<p>最后，请注意最后一步，第 8 步。文件中的“ENTRYPOINT”表示一旦从镜像运行容器，将执行哪个进程。</p>
<h3 id="3-10-管理镜像">3-10. 管理镜像</h3>
<p>Docker 镜像最初是存储在 PC 上的大文件，需要工具来管理这些文件。</p>
<p>Docker CLI 允许通过构建、列出、删除和运行镜像来管理镜像。使用 <code>docker</code> 客户端来管理 Docker 镜像。客户端不直接执行命令，而是将所有查询发送到 <code>dockerd</code> 守护进程。</p>
<p><strong>构建镜像</strong></p>
<p>使用 <code>docker build</code> 命令来构建 Docker 镜像。假设使用之前的 Dockerfile 定义来构建镜像。这是一个显示构建命令的示例。</p>
<pre tabindex="0"><code>docker build -t temp-ubuntu .
</code></pre><p>构建命令生成的输出：</p>
<pre tabindex="0"><code>Sending build context to Docker daemon  4.69MB
Step 1/8 : FROM ubuntu:18.04
 ---&gt; a2a15febcdf3
Step 2/8 : RUN apt -y update &amp;&amp; apt install -y wget nginx software-properties-common apt-transport-https &amp;&amp; wget -q https://packages.microsoft.com/config/ubuntu/18.04/packages-microsoft-prod.deb -O packages-microsoft-prod.deb &amp;&amp; dpkg -i packages-microsoft-prod.deb &amp;&amp; add-apt-repository universe &amp;&amp; apt -y update &amp;&amp; apt install -y dotnet-sdk-3.0
 ---&gt; Using cache
 ---&gt; feb452bac55a
Step 3/8 : CMD service nginx start
 ---&gt; Using cache
 ---&gt; ce3fd40bd13c
Step 4/8 : COPY ./default /etc/nginx/sites-available/default
 ---&gt; 97ff0c042b03
Step 5/8 : WORKDIR /app
 ---&gt; Running in 883f8dc5dcce
Removing intermediate container 883f8dc5dcce
 ---&gt; 6e36758d40b1
Step 6/8 : COPY ./website/. .
 ---&gt; bfe84cc406a4
Step 7/8 : EXPOSE 80:8080
 ---&gt; Running in b611a87425f2
Removing intermediate container b611a87425f2
 ---&gt; 209b54a9567f
Step 8/8 : ENTRYPOINT [&#34;dotnet&#34;, &#34;website.dll&#34;]
 ---&gt; Running in ea2efbc6c375
Removing intermediate container ea2efbc6c375
 ---&gt; f982892ea056
Successfully built f982892ea056
Successfully tagged temp-ubuntu:latest
</code></pre><p>请注意输出中列出的步骤。当每个步骤执行时，一个新层被添加到正在构建的镜像中。</p>
<p>另外，请注意当中执行了许多命令来安装软件和管理配置。例如，在第 2 步中，运行 <code>apt -y update</code> 和 <code>apt install -y</code> 命令来更新操作系统。这些命令在为该步骤创建的正在运行的容器中执行。命令运行后，中间容器将被删除。底层缓存图像保留在构建主机上，不会自动删除。这种优化可确保以后的构建重用这些镜像以加快构建时间。</p>
<table>
<thead>
<tr>
<th align="left">镜像管理</th>
<th align="left">命令</th>
<th align="left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">构建镜像</td>
<td align="left"><code>docker build [OPTIONS] PATH</code></td>
<td align="left">该 <code>PATH</code> 参数可以引用三种资源：Git 存储库、预打包的压缩包 和 纯文本文件 Dockerfile。</td>
</tr>
<tr>
<td align="left">1</td>
<td align="left"><code>docker build https://github.com/docker/rootfs.git#container:docker</code></td>
<td align="left">运行此命令以使用分支 <code>container</code> 中名为 <code>docker</code> 的目录</td>
</tr>
<tr>
<td align="left">2</td>
<td align="left"><code>docker build http://server/context.tar.gz</code></td>
<td align="left">Docker 守护进程将获取context.tar.gz并将其用作构建上下文。</td>
</tr>
<tr>
<td align="left">3</td>
<td align="left">在Dockerfile目录下执行 <code>docker build -t nginx:v3 .</code></td>
<td align="left">Dockerfile 是一个用来构建镜像的文本文件，文本内容包含了一条条构建镜像所需的指令和说明。在一个空目录下 <code>mkdir Projects</code>，新建一个名为 Dockerfile 文件 <code>touch Dockerfile</code></td>
</tr>
<tr>
<td align="left">标志镜像</td>
<td align="left"><code>docker build -t vieux/apache:2.0 .</code></td>
<td align="left">这将像前面的示例一样构建，但它将标记生成的镜像。存储库名称为 vieux/apache，标签为 2.0.</td>
</tr>
<tr>
<td align="left">上下文路径 <code>.</code></td>
<td align="left"></td>
<td align="left">上下文路径，是指 docker 在构建镜像，有时候想要使用到本机的文件（比如复制），docker build 命令得知这个路径后，会将路径下的所有内容打包。上下文路径下不要放无用的文件，因为会一起打包发送给 docker 引擎，如果文件过多会造成过程缓慢。</td>
</tr>
<tr>
<td align="left">列出镜像</td>
<td align="left"><code>docker images</code></td>
<td align="left">列出本地主机上的所有镜像</td>
</tr>
<tr>
<td align="left">查找镜像</td>
<td align="left"><code>docker search -f stars=3 ubuntu</code></td>
<td align="left">如果是用户名，则列出自己仓库的镜像，如果是关键字(例如：ubuntu)，则列出公共仓库的所有关于ubuntu的镜像，选项 <code>--limit</code> 最大结果搜索数</td>
</tr>
<tr>
<td align="left">拉取镜像</td>
<td align="left"><code>docker pull ubuntu:20.04</code></td>
<td align="left">指定拉取的用户名/镜像名:标签名，也可以 <code>docker pull ubuntu</code> ，不指定则默认下载公共仓库中存在的 ubuntu:latest 最新版，选项 <code>-a</code> 下载存储库中所有标记的镜像</td>
</tr>
<tr>
<td align="left">推送镜像</td>
<td align="left"><code>docker push username/ubuntu:18.04</code></td>
<td align="left">推送本地的镜像到远程仓库，前提是已在本地登录，选项 <code>-a</code> 推送存储库中的所有标记图像</td>
</tr>
<tr>
<td align="left">删除镜像</td>
<td align="left"><code>docker rmi [OPTIONS] IMAGE [IMAGE...]</code></td>
<td align="left">从主机节点中删除（和取消标记）一个或多个镜像。如果一个镜像有多个标签，使用这个带有标签作为参数的命令只会删除标签。如果标签是镜像的唯一标签，则镜像和标签都将被删除。这不会从注册表中删除镜像。除非使用 <code>-f</code> 选项，否则无法删除正在运行的容器的镜像。</td>
</tr>
</tbody>
</table>
<h2 id="4-docker-容器的工作原理">4. Docker 容器的工作原理</h2>
<p>容器是用来分发应用程序的单元。容器是独立运行的一个或一组应用，是 <code>镜像运行时的实体</code>。</p>
<h3 id="4-1-容器管理">4-1. 容器管理</h3>
<p>容器有一个生命周期，可以管理和跟踪容器的状态。</p>
<p><p class="md__image">
  <img src="https://docs.microsoft.com/en-us/learn/modules/intro-to-docker-containers/media/4-docker-container-lifecycle.svg" alt="img"  />
</p></p>
<table>
<thead>
<tr>
<th align="left">命令</th>
<th align="left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">run</td>
<td align="left">启动运行容器</td>
</tr>
<tr>
<td align="left">pause</td>
<td align="left">暂停正在运行的容器</td>
</tr>
<tr>
<td align="left">stop</td>
<td align="left">停止正在运行的容器</td>
</tr>
<tr>
<td align="left">kill</td>
<td align="left">终止正在运行的容器，正在运行的进程不会捕获终止信号</td>
</tr>
<tr>
<td align="left">remove</td>
<td align="left">删除处于停止状态的容器</td>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th align="left">容器管理</th>
<th align="left">命令</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">运行容器</td>
<td align="left"><code>docker run -itd --name ubuntu-test ubuntu /bin/bash</code></td>
</tr>
<tr>
<td align="left">列出容器(所有)</td>
<td align="left"><code>docker ps -a</code></td>
</tr>
<tr>
<td align="left">列出容器(运行)</td>
<td align="left"><code>docker ps</code></td>
</tr>
<tr>
<td align="left">启动容器</td>
<td align="left"><code>docker start my_container</code></td>
</tr>
<tr>
<td align="left">停止容器</td>
<td align="left"><code>docker stop my_container</code></td>
</tr>
<tr>
<td align="left">重启容器</td>
<td align="left"><code>docker restart my_container</code></td>
</tr>
<tr>
<td align="left">暂停容器</td>
<td align="left"><code>docker pause my_container</code></td>
</tr>
<tr>
<td align="left">取消暂停</td>
<td align="left"><code>docker unpause my_container</code></td>
</tr>
<tr>
<td align="left">进入容器</td>
<td align="left"><code>docker exec -it my_container /bin/bash</code></td>
</tr>
<tr>
<td align="left">退出容器</td>
<td align="left"><code>exit</code></td>
</tr>
<tr>
<td align="left">导出容器</td>
<td align="left"><code>docker export my_container &gt; ubuntu.tar</code></td>
</tr>
<tr>
<td align="left">从远程仓库导入容器</td>
<td align="left"><code>docker import https://example.com/exampleimage.tgz</code></td>
</tr>
<tr>
<td align="left">从本地文件导入容器</td>
<td align="left"><code>cat exampleimage.tgz | docker import - exampleimagelocal:new</code></td>
</tr>
<tr>
<td align="left">从本地目录导入容器</td>
<td align="left"><code>sudo tar -c . | docker import - exampleimagedir</code></td>
</tr>
<tr>
<td align="left">从具有新配置的本地目录导入容器</td>
<td align="left"><code>sudo tar -c . | docker import --change &quot;ENV DEBUG=true&quot; - exampleimagedir</code></td>
</tr>
<tr>
<td align="left">删除容器(非运行)</td>
<td align="left"><code>docker rm my_container</code></td>
</tr>
<tr>
<td align="left">删除容器(运行)</td>
<td align="left"><code>docker rm -f my_container</code></td>
</tr>
<tr>
<td align="left">删除所有容器(非运行)</td>
<td align="left"><code>docker container prune</code></td>
</tr>
</tbody>
</table>
<h3 id="4-2-容器存储配置">4-2. 容器存储配置</h3>
<p>在考虑存储数据时，始终将容器视为临时容器至关重要。</p>
<p>容器存储即容器文件系统，当应用程序将数据写入日志文件时，系统会将数据写入可写的容器层。</p>
<p>尽管这种方法有效，但是不幸的是，它存在几个缺点：</p>
<table>
<thead>
<tr>
<th align="left">缺点</th>
<th align="left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">容器存储是临时的</td>
<td align="left">日志文件不会在容器实例之间保留。例如，假设停止并移除容器。当启动新的容器实例时，新实例会基于指定的镜像，之前的所有数据都将丢失。请记住，当移除容器时，容器中的所有数据都会随容器一起销毁。</td>
</tr>
<tr>
<td align="left">容器存储与底层宿主机耦合</td>
<td align="left">由于容器与底层主机耦合，因此很难从容器访问或移动日志文件。必须连接到容器实例才能访问该文件。</td>
</tr>
<tr>
<td align="left">容器存储驱动器的性能较低</td>
<td align="left">容器实现了一个存储驱动程序以允许应用程序写入数据。该驱动程序引入了一个额外的抽象来与主机操作系统内核进行通信，并且性能不如直接写入主机文件系统。</td>
</tr>
</tbody>
</table>
<p>容器可以使用两个选项来持久化数据。第一个选项是使用 <code>*卷* </code>，第二个选项是 <code>*绑定安装* </code>。</p>
<table>
<thead>
<tr>
<th align="left">选项</th>
<th align="left">命令</th>
<th align="left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">卷存储</td>
<td align="left"><code>docker volume create</code></td>
<td align="left">卷被认为是与容器一起使用的首选数据存储策略，多个容器可以同时使用相同的卷。当容器被删除时，卷也不会自动删除。</td>
</tr>
<tr>
<td align="left">绑定挂载</td>
<td align="left"></td>
<td align="left">绑定挂载在概念上与卷相同，但是，可以挂载主机上的任何文件或文件夹，而不是使用特定文件夹。主机也可以更改这些挂载的内容。与卷相比，绑定挂载的功能有限，尽管它们的性能更高，但它们依赖于具有特定文件夹结构的主机。</td>
</tr>
</tbody>
</table>
<h3 id="4-3-容器网络配置">4-3. 容器网络配置</h3>
<p>默认的 Docker 网络配置允许隔离 Docker 主机上的容器。此功能能够构建和配置可以安全地相互通信的应用程序。</p>
<p>Docker 提供了三种预配置的网络配置。</p>
<p>可以根据容器的网络要求选择将这些网络配置中的哪些应用于容器。</p>
<table>
<thead>
<tr>
<th align="left">选项</th>
<th align="left">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left">Bridge</td>
<td align="left">桥接网络是启动时应用于容器的默认配置，无需指定任何额外的网络配置。该网络是容器使用的内部私有网络，将容器网络与 Docker 主机网络隔离开来。桥接网络中的每个容器都被分配了一个 IP 地址和子网掩码，主机名默认为容器名称。允许连接到默认网桥网络的容器通过 IP 地址访问其他网桥连接的容器。桥接网络不允许使用主机名在容器之间进行通信。默认情况下，Docker 不发布任何容器端口。要启用容器端口和 Docker 主机端口之间的端口映射，请使用 Docker 端口&ndash;publish标志。发布标志有效地配置了映射端口的防火墙规则。<code>--publish 8080:80</code>任何浏览到 Docker 主机 IP 和端口 8080 的客户端都可以访问跟踪门户。</td>
</tr>
<tr>
<td align="left">Host</td>
<td align="left">主机网络可以直接在主机网络上运行容器。这种配置在网络级别有效地消除了主机和容器之间的隔离。在此示例中，假设决定将网络配置更改为主机网络选项。门户仍然可以使用主机 IP 访问。可以使用众所周知的端口 80 而不是映射端口。请记住，容器只能使用主机尚未使用的端口。</td>
</tr>
<tr>
<td align="left">none</td>
<td align="left">要禁用容器的网络，请使用 none 网络选项。</td>
</tr>
</tbody>
</table>
<ul>
<li>操作系统注意事项</li>
</ul>
<p>请记住，Docker 网络配置选项的桌面操作系统之间存在差异。例如，<em>Docker0</em>网络接口在使用桥接网络时在 macOS 上不可用，并且 Windows 和 macOS 桌面都不支持使用主机网络配置。</p>
<h2 id="5-更多详情httpswwwrunoobcomdockerdocker-container-connectionhtml">5. <a href="https://www.runoob.com/docker/docker-container-connection.html" target="_blank">更多详情</a></h2>
<h2 id="附上-vivim">附上 vi/vim</h2>
<p>基本上 vi/vim 共分为三种模式，分别是 <strong>命令模式（Command mode）</strong> ， <strong>输入模式（Insert mode）</strong> 和 <strong>底线命令模式（Last line mode）</strong> 。 这三种模式的作用分别是：</p>
<table>
<thead>
<tr>
<th>模式</th>
<th>进入和退出</th>
</tr>
</thead>
<tbody>
<tr>
<td>命令模式</td>
<td><code>vi &lt;文件&gt;</code> , 退出vi <code>:exit</code> 或者 <code>:q</code> 或者 <code>:wq</code></td>
</tr>
<tr>
<td>输入模式</td>
<td>命令模式下 <code>i</code> 。退出输入模式  <code>ESC</code></td>
</tr>
<tr>
<td>底线模式</td>
<td>命令模式下 <code>:</code>（英文冒号）。退出底线模式 <code>ECS</code></td>
</tr>
</tbody>
</table>

  </article>
</div>
      

      
  

    </article>
    
    <section id="list-side" class="r" data-dir="ltr">
      
        <div class="toc">
  <h6 class="toc__label">此页面上有什么</h6>
  <div class="toc__body">
    <nav id="TableOfContents">
  <ul>
    <li><a href="#1-docker">1. Docker</a></li>
    <li><a href="#2-docker-架构">2. Docker 架构</a>
      <ul>
        <li><a href="#2-1-docker-引擎">2-1. Docker 引擎</a></li>
        <li><a href="#2-2-docker-hub">2-2. Docker Hub</a></li>
      </ul>
    </li>
    <li><a href="#3-docker-镜像的工作原理">3. Docker 镜像的工作原理</a>
      <ul>
        <li><a href="#3-1-容器软件">3-1. 容器软件</a></li>
        <li><a href="#3-2-容器镜像">3-2. 容器镜像</a></li>
        <li><a href="#3-3-主机操作系统">3-3. 主机操作系统</a></li>
        <li><a href="#3-4-容器操作系统">3-4. 容器操作系统</a></li>
        <li><a href="#3-5-可堆叠文件系统">3-5. 可堆叠文件系统</a></li>
        <li><a href="#3-6-基础镜像">3-6. 基础镜像</a></li>
        <li><a href="#3-7-父镜像">3-7. 父镜像</a></li>
        <li><a href="#3-8-基础镜像和父镜像的区别">3-8. 基础镜像和父镜像的区别</a></li>
        <li><a href="#3-9-dockerfile">3-9. Dockerfile</a></li>
        <li><a href="#3-10-管理镜像">3-10. 管理镜像</a></li>
      </ul>
    </li>
    <li><a href="#4-docker-容器的工作原理">4. Docker 容器的工作原理</a>
      <ul>
        <li><a href="#4-1-容器管理">4-1. 容器管理</a></li>
        <li><a href="#4-2-容器存储配置">4-2. 容器存储配置</a></li>
        <li><a href="#4-3-容器网络配置">4-3. 容器网络配置</a></li>
      </ul>
    </li>
    <li><a href="#5-更多详情httpswwwrunoobcomdockerdocker-container-connectionhtml">5. <a href="https://www.runoob.com/docker/docker-container-connection.html">更多详情</a></a></li>
    <li><a href="#附上-vivim">附上 vi/vim</a></li>
  </ul>
</nav>
  </div>
</div>
      
    </section>

  </div>
</div>

<script>
  'use strict';
  
  function wrap(el, wrapper) {
    el.parentNode.insertBefore(wrapper, el);
    wrapper.appendChild(el);
  }

  (function () {
    var singleContentsElem = document.querySelector('.single__contents');
    singleContentsElem ? 
    singleContentsElem.querySelectorAll('pre > code').forEach(function(elem) {
      var dataLang = elem.getAttribute('data-lang');
      var dataLangWrapper = document.createElement('div');
      var code = null;
      var codeTitle = null;

      if (dataLang && dataLang.includes(':')) {
        code = dataLang.split(':')[0];
        codeTitle = dataLang.split(':')[1];

        dataLangWrapper.className = 'language-' + code;
        dataLangWrapper.setAttribute('data-lang', codeTitle);

        elem.className = 'language-' + code;
        elem.setAttribute('data-lang', codeTitle);
        elem.setAttribute('id', codeTitle);
      }

      if (!dataLang || codeTitle) {
        wrap(elem.parentNode, dataLangWrapper);
      }

    }) : null;
  })();
  


  
  
  var dollarCodeElem = document.querySelectorAll('div.language-\\$');
  var gtCodeElem = document.querySelectorAll('div.language-\\>');
  
  dollarCodeElem ?
  dollarCodeElem.forEach(function(elem) {
    var lnts = elem.parentNode.parentNode ? elem.parentNode.parentNode.querySelectorAll('.lnt') : null;
    lnts ? 
    lnts.forEach(function(lnt) {
      lnt.innerHTML = '$<br/>';
    }) : null;
  }) : null;

  gtCodeElem ?
  gtCodeElem.forEach(function(elem) {
    var lnts = elem.parentNode.parentNode ? elem.parentNode.parentNode.querySelectorAll('.lnt') : null;
    lnts ? 
    lnts.forEach(function(lnt) {
      lnt.innerHTML = '><br/>';
    }) : null;
  }) : null;
  
</script>




<script defer src="/js/helper/getParents.min.js"></script>

<script defer src="/js/helper/closest.min.js"></script>

<script defer src="/js/helper/prev.min.js"></script>

<script defer src="/js/helper/prop.min.js"></script>

<script defer src="/js/helper/fadeinout.min.js"></script>












<script>
  document.addEventListener('DOMContentLoaded', function () {
    'use strict';
    
    
    var tables = document.querySelectorAll('.single__contents > table');
    for (let i = 0; i < tables.length; i++) {
      var table = tables[i];
      var wrapper = document.createElement('div');
      wrapper.className = 'table-wrapper';
      table.parentElement.replaceChild(wrapper, table);
      wrapper.appendChild(table);
    }
    


    
    
    
    var lib = JSON.parse("null");

    if (lib && lib.includes('mermaid')) {
      var themeVariant = localStorage.getItem('theme') || 'light';

      if (themeVariant === "dark") {
        mermaid.initialize({ theme: 'dark' });
      } else {
        mermaid.initialize({ theme: 'default' });
      }
      
      var mermaids = [];
      [].push.apply(mermaids, document.getElementsByClassName('language-mermaid'));
      mermaids.forEach(function(elem) {
        var elemParentNode = elem.parentNode;

        if (elemParentNode !== document.body) {
          elemParentNode.parentNode.insertBefore(elem, elemParentNode);
          elemParentNode.parentNode.removeChild(elemParentNode);
        }

        var newElemWrapper = document.createElement('div');
        newElemWrapper.classList.add('mermaid');
        newElemWrapper.innerHTML = elem.innerHTML;
        elem.replaceWith(newElemWrapper);
      });
    }
    
    

    
    if (lib && lib.includes('katex')) {
      var mathElements = document.getElementsByClassName('math');
      var options = {
        delimiters: [
          { left: "$$", right: "$$", display: true },
          { left: "\\[", right: "\\]", display: true },
          { left: "$", right: "$", display: false },
          { left: "\\(", right: "\\)", display: false }
        ],
      };

      renderMathInElement(document.querySelector('.single__contents'), options);
    }
    


    
    if (lib && lib.includes('flowchartjs')) {
      
      var options = JSON.parse("{\"arrow-end\":\"block\",\"element-color\":\"black\",\"fill\":\"white\",\"flowstate\":{\"approved\":{\"fill\":\"#58C4A3\",\"font-size\":12,\"no-text\":\"n/a\",\"yes-text\":\"APPROVED\"},\"current\":{\"fill\":\"yellow\",\"font-color\":\"red\",\"font-weight\":\"bold\"},\"future\":{\"fill\":\"#FFFF99\"},\"invalid\":{\"fill\":\"#444444\"},\"past\":{\"fill\":\"#CCCCCC\",\"font-size\":12},\"rejected\":{\"fill\":\"#C45879\",\"font-size\":12,\"no-text\":\"REJECTED\",\"yes-text\":\"n/a\"},\"request\":{\"fill\":\"blue\"}},\"font-color\":\"black\",\"font-size\":14,\"line-color\":\"black\",\"line-length\":50,\"line-width\":3,\"no-text\":\"no\",\"scale\":1,\"symbols\":{\"end\":{\"class\":\"end-element\"},\"start\":{\"element-color\":\"green\",\"fill\":\"yellow\",\"font-color\":\"red\"}},\"text-margin\":10,\"x\":0,\"y\":0,\"yes-text\":\"yes\"}");
      var jsonContent = null;

      var flowchartPrefix = "language-flowchart";
      var index = 0;
      Array.prototype.forEach.call(document.querySelectorAll("[class^=" + flowchartPrefix + "]"), function(x){
          x.style.display = 'none'
          x.parentNode.style.backgroundColor = "transparent"
          jsonContent = x.innerText;

          var node0 = document.createElement('div');
          node0.id = 'flowchart' + index;
          x.parentNode.insertBefore(node0, x);

          var diagram = flowchart.parse(jsonContent);
          diagram.drawSVG("flowchart"+index, options);

          index +=1;
      });      
    }
    


    
    if (lib && lib.includes('chart')) {
      var borderColor = "#666";
      var bgColor = "#ddd";
      var borderWidth = 2;

      Chart.defaults.global.elements.rectangle.borderWidth = borderWidth;
      Chart.defaults.global.elements.rectangle.borderColor = borderColor;
      Chart.defaults.global.elements.rectangle.backgroundColor = bgColor;

      Chart.defaults.global.elements.line.borderWidth = borderWidth;
      Chart.defaults.global.elements.line.borderColor = borderColor;
      Chart.defaults.global.elements.line.backgroundColor = bgColor;

      Chart.defaults.global.elements.point.borderWidth = borderWidth;
      Chart.defaults.global.elements.point.borderColor = borderColor;
      Chart.defaults.global.elements.point.backgroundColor = bgColor;

      var chartPrefix = "language-chart";
      var index = 0;
      var jsonContent = null;

      Array.prototype.forEach.call(document.querySelectorAll("[class^=" + chartPrefix + "]"), function (x) {
        x.style.display = 'none'
        x.parentNode.style.backgroundColor = "transparent"
        jsonContent = x.innerText;
        var node0 = document.createElement('canvas');
        var source = null;
        node0.height = 200;
        node0.style.height = 200;
        node0.id = 'myChart' + index;
        source = JSON.parse(jsonContent);
        x.parentNode.insertBefore(node0, x);
        var ctx = document.getElementById('myChart' + index).getContext('2d');
        var myChart = new Chart(ctx, source);
        index += 1;
      });            
    }
    


    
    if (lib && lib.includes('viz')) {
      var vizPrefix = "language-viz-";
      Array.prototype.forEach.call(document.querySelectorAll("[class^=" + vizPrefix + "]"), function (x) {
        x.style.display = 'none'
        x.parentNode.style.backgroundColor = "transparent"
        var engine;
        x.getAttribute("class").split(" ").forEach(function (cls) {
          if (cls.startsWith(vizPrefix)) {
            engine = cls.substr(vizPrefix.length);
          }
        });
        var viz = new Viz();
        viz.renderSVGElement(x.innerText, { engine: engine })
          .then(function (element) {
            element.style.width = "100%";
            x.parentNode.insertBefore(element, x);
          })
      });
    }
    
    
  });
</script>

<script>
  var listSide = document.getElementById('list-side');
  var listMain = document.getElementById('list-main');
  var singleMenu = document.getElementById('single-menu');
  var switchElem = document.querySelector('.switch');
  var wideViewAsDefault = JSON.parse("false");
  
  enquire.register("screen and (max-width:1280px)", {
    match: function () {
      if (wideViewAsDefault) {
        singleMenu.className = 'l';  
        listMain.className = 'mr';
        listSide.className = 'hide';
      } else {
        singleMenu.className = 'l';
        listMain.className = 'm';
        listSide.className = 'r';
      }
    },
    unmatch: function () {
      if (wideViewAsDefault) {
        singleMenu.className = 'l';
        listMain.className = 'mr';
        listSide.className = 'hide';
      } else {
        listSide.className = 'r';
        listMain.className = 'm';
        singleMenu.className = 'l';
      }
    },
  }).register("screen and (max-width:960px)", {
    match: function () {
      singleMenu.className = 'l';
      listMain.className = 'mr';
      listSide.className = 'hide';
      switchElem.className = 'hide';
    },
    unmatch: function () {
      if (wideViewAsDefault) {
        singleMenu.className = 'l';
        listMain.className = 'mr';
        listSide.className = 'hide';
      } else {
        singleMenu.className = 'l';
        listMain.className = 'm';
        listSide.className = 'r';
      }
      switchElem.className = 'switch';
    },
  }).register("screen and (max-width:600px)", {
    match: function () {
      listSide.className = 'hide';
      listMain.className = 'lmr';
      singleMenu.className = 'hide';
      switchElem.className = 'hide';
    },
    unmatch: function () {
      listSide.className = 'hide';
      listMain.className = 'mr';
      singleMenu.className = 'l';
      switchElem.className = 'hide';
    },
  });
</script>

        
<div class="bot">
  <footer class="footer">
    <div class="divider">
      <div class="lmr">
        
          <p class="caption">
            ©2022, codthing
          </p>
          
        
      </div>
    </div>
  </footer>
</div>

    </div>

</body>

</html>